<template>
    <div class="fmainBox">
        <el-row :gutter="10">
            <el-col :span="9">
                <div class="vgfBox">
                    <div class="itembox">
                        <div class="title">
                            <span>农场分布</span>
                            <div style="width: 200px;">
                                <company-select v-model="companyId" :disabled="userStore.userInfo.roleId!=1" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" @change="reGetData"/>
                            </div>
                        </div>
                        <div class="ptopbox">
                            <tencent-map ref="mapRef" :center="{'lat':34.35,'lng':104.33}" :zoom="3.5" :showControl="false"/>
                            <!-- <map-mode-control v-if="mapRef" :mapObj="mapRef"/> -->
                        </div>
                    </div>
                    <div class="itembox">
                        <div class="title"><span>土地资产</span></div>
                        <div class="pbottombox">
                            <chart v-if="showCp" :companyId="companyId"/>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="9">
                <div class="vgfBox">
                    <div class="itembox">
                        <div class="title">
                            <span>农事分析</span>
                            <farm-select @change="reGetData2" width="150px" v-model="farmId" :params="{isEnable:true}"/>
                        </div>
                        <div class="ptopbox">
                            <farming-analysis ref="fmanRef"/>
                        </div>
                    </div>
                    <div class="itembox">
                        <div class="title">
                            <span>控预算</span>
                            <el-select clearable placeholder="请选择计划" style="width:200px" class="small-el-input__inner" popper-class="samll-el-select-dropdown__list" v-model="plantHeaderId" @change="plantChange">
                                <el-option v-for="dt in plantList" :key="dt.plantHeaderId" :value="dt.plantHeaderId" :label="dt.plantNumber" />
                            </el-select>
                        </div>
                        <div class="pbottombox">
                            <budget-chart v-if="showCp2" :plantHeaderId="plantHeaderId"/>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="itembox" style="height: 100%;">
                    <div class="title">
                        <span>消息</span>
                        <!-- <el-select clearable placeholder="请选择" style="width:100px" class="small-el-input__inner" popper-class="samll-el-select-dropdown__list">
                            <el-option v-for="dt in 10" key="dt" value="dt" :label="'对对对'+dt" />
                        </el-select> -->
                    </div>
                    <index-message/>
                </div>
            </el-col>
          </el-row>
    </div>
  </template>
  
  <script setup name="courseList">
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
  import {getFarmDistribution,getPlantList} from '@/api/plant'
  
  import mainLayout from '@/components/custom/mainLayout.vue'
  import tencentMap from '@/components/custom/tencentMap.vue'
  import chart from './components/chart.vue'
  import budgetChart from './components/budgetChart.vue'
  import farmingAnalysis from './components/farmingAnalysis.vue'
  import indexMessage from "./components/indexMessage.vue"
  import farmSelect from '@/components/custom/farmSelect.vue'
  import mapModeControl from '@/components/custom/mapModeControl.vue'
  import { useUserStore } from '@/pinia/modules/user'
  import {message} from '@/utils/element'
  import companySelect from '@/components/custom/companySelect.vue'
  
  const userStore = useUserStore()
  
  const mapRef = ref(null)
  const companyId = ref('')
  let mapDot = ref('')
  let showCp = ref(false)
  let showCp2 = ref(false)
  const plantHeaderId = ref('')
  const plantList = ref([])
  const fmanRef = ref(null)
  const farmId = ref('')
  
  onMounted(async ()=>{
    companyId.value = userStore.userInfo.companyId
    get_plant_list()
    await nextTick()
    get_farm_distribution()
    fmanRef.value.init(companyId.value,farmId.value)
    // mapRef.value.createDot([
    //     //{ lat: 29.42, lng: 106.50, styleId: "redCircle" },
    //     { lat: 30.40, lng: 90.50, styleId: "redCircle" }
    // ],30)
  
  })

  // 农场分布列表
  const get_farm_distribution =async ()=>{
    mapDot.value && mapDot.value.destroy()
    const res = await getFarmDistribution(companyId.value)
    let fbDatas=[]
    res.data.forEach(item =>{
        let obj = {
            lat:parseFloat(item.locationLatitude),
            lng:parseFloat(item.locationLongitude),
            styleId: "redCircle"
        }
        fbDatas.push(obj)
    })
    mapDot.value = mapRef.value.createDot(fbDatas,20)
    showCp.value = true
  }

  // 获取计划列表
  const get_plant_list = ()=>{
    showCp2.value = false
    getPlantList({limit:50,page:1}).then(res =>{
        plantList.value = res.data
        if(res.data && res.data.length>0){
            plantHeaderId.value = res.data[0].plantHeaderId
        }
        showCp2.value = true
    })
  }

  // 公司选择变化
  const reGetData = ()=>{
    showCp.value = false
    get_farm_distribution()
    fmanRef.value.init(companyId.value,farmId.value)
  }

  let st = ''
  const plantChange =()=>{
    st && clearTimeout(st)
    showCp2.value = false
    st = setTimeout(()=>{
        showCp2.value = true
    },500)
  }

  const reGetData2 = (item)=>{
    fmanRef.value.init(companyId.value,item.farmId)
  }

  
  </script>
  
  <style lang="scss" scoped>
    .fmainBox{
        box-sizing: border-box;
        //border: 1px solid red;
        min-width: 1200px;
        .vgfBox{
            //display: flex;
            //flex-flow: column;
            //height: 100%;
        }
        .itembox{
            box-sizing: border-box;
            background: #fff;
            padding: 10px;
            .ptopbox{
                box-sizing: border-box;
                padding: 10px 0 0 0;
                //height: 450px;
                height: 350px;
            }
            &+.itembox{
                margin: 10px 0 0 0;
            }
            .pbottombox{
                box-sizing: border-box;
                height: 350px;
            }
        }
        .title{
            box-sizing: border-box;
            display: flex;
            height: 30px;
            align-items: center;
            span{
                display: flex;
                align-items: center;
                font-size: 12px;
                flex: 1;
                font-weight: bold;
                &::before{
                    content: "";
                    display: block;
                    width: 3px;
                    background: #48b27a;
                    height: 14px;
                    margin: 0 3px 0 0;
                }
            }
        }
    }
  </style>
  